<template>
    <div class="register">
        <div class="reg-img">
            <div class="main">
                <span>欢迎注册好句分享</span>
                <div class="main-msg">
                    <input type="text" placeholder="请输入用户名"><br>
                    <input type="text" placeholder="请输入密码"><br>
                    <input type="text" placeholder="请确认密码"><br>
                    <button type="submit">注册</button>
                </div>
                <div class="bottom">
                    <span @click.prevent="toLogin()">去登录</span>
                    <span @click.prevent="toHome()">去首页</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Register',
    data(){
        return{

        }
    },
    methods:{
        toLogin(){
            return this.$router.push({path:'/Login'});
        },
        toHome(){
            return this.$router.push({path:'/'});
        }
    }
}
</script>

<style scoped>
@import "../assets/reset.css";
@font-face {
            font-family: "情书字体";
            src: url('../assets/font/方正手迹.ttf');
        }
.register{
    width: 100%;
    height: 606px;
}
.register .reg-img{
    width: 100%;
    height: 100%;
    background-image: url('../assets/register.png');
    background-size: cover;
    display: flex;
}
.register .reg-img .main{
    width: 380px;
    height: 400px;
    background-color: rgba(240, 243, 242, 0.37);
    border-radius: 20px;
    box-shadow: 0 0 10px white;
    margin: auto;
    text-align: center;
    padding: 10px;
}
.main>span:nth-child(1){
    display: inline-block;
    margin-top: 10px;
    font-size: 40px;
    font-family: '情书字体';
    font-weight: bold;
    color: rgb(205, 155, 206);
    text-shadow: 0 0 10px skyblue;
}
.main-msg input{
    padding: 15px;
    margin-top: 20px;
    border-radius: 20px;
    width: 300px;
    background-color: white;
    opacity: 0.3;
    border: 1px solid rgb(228, 227, 227);
}
.main-msg button{
    margin-top: 20px;
    padding: 15px;
    font-size: 16px;
    color: white;
    background-color: #87cefadb;
    border-radius: 30px;
    width: 330px;
}
.bottom{
    margin-top: 15px;
    text-align: right;
    margin-right: 20px;
    margin-bottom: 0;
}
.bottom span{
    display: inline-block;
    margin-left: 10px;
    color: white;
    text-shadow: 0 0 10px skyblue;
    font-size: 16px;
}
.bottom span:hover{
    color: skyblue;
    cursor: pointer;
}
</style>